<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板字面量</title>
    <style>
        ul{
            list-style: none;
        }
        ul li{
            width: 300px;
            padding: 10px;
        }
        ul li:nth-child(odd){
            background-color: salmon;
        }
    </style>
</head>
<body>
    
</body>
</html>
<script>
    //模板字面量中可以直接使用  变量    也可以调用方法  也可以使用表达式   也可以使用绝大部分直接在js中的函数内容
    let lessons = [
        {title:'媒体查询响应式布局'},
        {title:'FLEX弹性盒子模型'},
        {title:'GID操作'}
    ];

    function template(){
        return `
            <ul>
                ${lessons.map((item)=>`
                    <li>${item.title}</li>
                `).join(' ')}
            </ul>
        `;
    }
    document.body.innerHTML = template();
</script>